<template>
	<view class="container">
		<view class="top_bg">
			<image class="bg_img" src="../../static/image/top_img.png"></image>
			<view class="back">
				<view class="back_left" @click="handleback()">
					<image class="back_img" src="../../static/image/left.png"></image>
				</view>
				<view class="back_right">我的统计</view>
			</view>
			<view class="top_content">
				<view class="top_item">
					<view class="num_data" 
						:class="ymActive === item.id ? 'numdata_active' : '' " 
						v-for="(item,index) in yearandmonth" 
						:key="index" 
						@click="handlechoosemy(item,index)"
					>
						{{ item.title }}
					</view>
				</view>
			</view>
			<c_yearlist v-show="ymActive === 1" />
			<c_monthlist v-show="ymActive === 0" />
			<view class="data_content">
				<view class="data_top">
					<view class="top_left">
						<image src="../../static/image/line.png" class="line_img"></image>
					</view>
					<view class="top_right">本月收支比<text class="number">(20%)</text></view>
				</view>
				<view class="month_content">
					<view class="month_left">
						<view class="top">本月收入</view>
						<view class="bottom">￥ 3049.35</view>
					</view>
					<view class="month_right">
						<view class="top">本月支出</view>
						<view class="bottom">￥ 1213.0</view>
					</view>
				</view>
			</view>
			<view class="common_list">
				<view class="list_top">
					<view class="drop_item" @click="handleChoose">
						{{ show_text }}
						<image class="drop_img"  :src=" all_show ? '../../static/image/drop_down.png' : '../../static/image/drop_up.png' "></image>
					</view>
					<view class="drop_list" v-show="all_show">
						<view class="list_item" :class="isActive === index ? 'list_text_active' : ''" v-for="(item, index) in allContent" :key="index" @click="handleitem(item,index)">{{ item }}</view>
					</view>
				</view>
				<view class="money_all">
					<view class="all_content">
						<view class="content_left">
							<view class="left_top">300</view>
							<view class="left_bottom">购买次数</view>
						</view>
						<view class="content_right">
							<view class="left_top">76</view>
							<view class="left_bottom">中奖次数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import c_yearlist from '../common/components/year.vue'
	import c_monthlist from '../common/components/month.vue'
	export default {
		components:{
			c_yearlist,
			c_monthlist
		},
		data() {
			return {
				isActive:0,
				show_text:'全部',
				all_show:false,
				ymActive:0,
				yearandmonth:[
					{
						id:0,
						title:'月数据'
					},
					{
						id:1,
						title:'年数据'
					}
				],
				allContent:[ '全部' , '双色球' , '快乐8' , '福彩3D' , '七乐彩' , '大乐透' ]
			};
		},
		methods:{
			handleback(){
				uni.navigateBack()
			},
			handlechoosemy(item,index){
				this.ymActive = item.id
			},
			handleChoose(){
				this.all_show =! this.all_show
			},
			handleitem(item,index){
				this.isActive = index
				this.show_text = item
				this.all_show = false
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $bg_color;
	}
	.container{
		width: 100%;
		@include flexBox(column);
		.top_bg {
			width: 100%;
			height: 184px;
			box-sizing: border-box;
			position: relative;
			.bg_img {
				width: 100%;
				height: 100%;
			}
			.back{
				width: 100%;
				height: 44px;
				box-sizing: border-box;
				position: absolute;
				top: 20px;
				display: flex;
				.back_left{
					flex: 0.1;
					@include centerAline()
					.back_img{
						width: 16px;
						height: 16px;
					}
				}
				.back_right{
					flex: 0.9;
					text-align: center;
					font-weight: bold;
					color: $white_color;
					font-size: $font-size-18;
					line-height: $line-height-44;
				}
			}
		}
		.top_content{
			width: 346px;
			height: 128px;
			position: absolute;
			top: 110px;
			border-radius: $radius_eight;
			left: calc(50% - 173px);
			background-color: $white_color;
			.top_item{
				width: 148px;
				height: 32px;
				margin: 0 auto;
				margin-top: $margin-top-20;
				display: flex;
				.num_data{
					width:74px ;
					height: 32px;
					border: 1px solid #DCDCDC;
					text-align: center;
					line-height: $line-height-32;
					font-size: $font-size-14;
					color: $gray_color;
				}
				.numdata_active{
					color: $primary_color;
					border: 1px solid $primary_color;
				}
			}
		}
		.data_content{
			width: 346px;
			height: 160px;
			background-color: $white_color;
			margin: 0 auto;
			margin-top: $margin-top-60;
			border-radius: $radius_eight;
			box-sizing: border-box;
			padding: 10px;
			.data_top{
				width: 100%;
				height: 30px;
				display: flex;
				.top_left{
					flex: 0.1;
					@include centerAline()
					.line_img{
						width: 10px;
						height: 30px;
					}
				}
				.top_right{
					flex: 0.9;
					line-height: $line-height-30;
					color: $black_color;
					font-weight: bold;
					.number{
						margin-left: 10px;
						color: $primary_color;
					}
				}
			}
			.month_content{
				width: 100%;
				height: 100px;
				margin-top: 10px;
				display: flex;
				.month_left{
					flex: 0.5;
					background-image: url('../../static/image/red.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					.top{
						width: 100%;
						height: 40px;
						margin-top: 10px;
						box-sizing: border-box;
						font-size: $font-size-12;
						padding-left: 20px;
						line-height: $line-height-40;
						color: $gray_color;
					}
					.bottom{
						width: 100%;
						height: 40px;
						box-sizing: border-box;
						padding-left: 20px;
						line-height: $line-height-40;
						margin-top: 10px;
						font-size: $font-size-18;
						font-weight: bold;
						color: $primary_color;
					}
				}
				.month_right{
					flex: 0.5;
					background-image: url('../../static/image/green.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					.top{
						width: 100%;
						height: 40px;
						box-sizing: border-box;
						padding-left: 50px;
						line-height: $line-height-40;
						margin-top: 10px;
						font-size: $font-size-12;
						color: $gray_color;
					}
					.bottom{
						width: 100%;
						height: 40px;
						box-sizing: border-box;
						padding-left: 40px;
						line-height: $line-height-40;
						margin-top: 10px;
						font-size: $font-size-18;
						font-weight: bold;
						color: #00AE46;
					}
				}
			}
		}
		
		.common_list{
			width: 346px;
			height: 165px;
			margin: 0 auto;
			position: relative;
			background-color: $white_color;
			margin-top:$margin-top-20;
			border-radius: $radius_eight;
			box-sizing: border-box;
			padding: 10px;
			.list_top{
				width: 100%;
				height: 32px;
				position: relative;
				.drop_item{
					width: 84px;
					height: 32px;
					border: 1px solid $primary_color;
					border-radius: $radius_eight;
					@include centerAline();
					font-size: $font-size-14;
					color: $primary_color;
					.drop_img{
						width: 25px;
						height: 25px;
					}
				}
				.drop_list{
					width: 84px;
					border-radius: $radius_eight;
					background: #ffffff;
					box-shadow: 3px 3px 3px #d9d9d9,
						-2px -2px 10px #ffffff;
					position: absolute;
					left: 0;
					top: 40px;
					.list_item{
						width: 100%;
						height: 32px;
						font-size: $font-size-14;
						text-align: center;
						line-height: $line-height-32;
					}
					.list_text_active{
						color: $primary_color;
					}
				}
			}
			.money_all{
				width: 100%;
				height: 90px;
				margin-top: 20px;
				background-color: #FFFBF3;
				border-radius: $radius_four;
				box-sizing: border-box;
				padding-top: 4px;
				.all_content{
					width: 90%;
					height: 70px;
					margin: 0 auto;
					margin-top: 6px;
					display: flex;
					.content_left{
						flex: 0.5;
						border-right: 1px solid #d1cdcd;
						.left_top{
							width: 100%;
							height: 35px;
							text-align: center;
							line-height: $line-height-35;
							color: #FF5200;
							font-size: $font-size-18;
							font-weight: bold;
						}
						.left_bottom{
							width: 100%;
							height: 35px;
							text-align: center;
							line-height: $line-height-35;
							color: $gray_color;
							font-size:$font-size-12;
						}
					}
					.content_right{
						flex: 0.5;
						.left_top{
							width: 100%;
							height: 35px;
							text-align: center;
							line-height: $line-height-35;
							color: #FF5200;
							font-size: $font-size-18;
							font-weight: bold;
						}
						.left_bottom{
							width: 100%;
							height: 35px;
							text-align: center;
							line-height: $line-height-35;
							color: $gray_color;
							font-size: $font-size-12;
						}
					}
				}
			}
		}
	}
</style>
